* {
    margin: 0;
    padding: 0;
    list-style: none;

}

$w: 100%;

//伪元素制作价格符号￥
%pice_icon {
    content: '￥';
    display: inline-block;
    width: 14px;
    height: 16px;
    font-size: 20px;
    color: #105335;
    opacity: 0.5;
}

//伪元素做装饰横线
%lineae {
    content: '';
    display: inline-block;
    //width: 315px;
    width: 100%;
    height: 1px;
    background-color: #7d7d7d;
}

//button按钮  立即抢购
%pice_button {

    width: 105px;
    height: 26px;
    background-color: #f26b6e;
    border: transparent;
    font-size: 18px;
    color: #f8f3f0;
    position: relative;
    margin: 0 12px 0 33px;
    cursor: pointer;

    &::after {
        content: '';
        display: inline-block;
        width: 24px;
        height: 20px;
        border: 4px solid;
        border-color: #f26b6e #f26b6e transparent transparent;
        //border-color: #105335;

        position: absolute;
        top: -8px;
        right: -10px;
    }
}

//价格
%pice_number {

    width: 88px;
    height: 49px;
    font-family: Impact;
    font-size: 60px;
    line-height: 22px;
    letter-spacing: 1px;
    color: #bd9c6f;

    //￥
    &::before {
        @extend %pice_icon;
        position: relative;
        left: -5px;
    }


}

//流行趋势标题
%trend_line {

    // width: 690px;
    height: 180px;
    text-align: center;
    margin: 103px auto;

    p {
        font-size: 54px;
        color: #b4b3bd;

        span:first-child {
            color: #b0822b;
            font-size: 61px;
            margin-right: 35px;
        }

        span:last-child {
            font-size: 87px;
            color: #010101;
            font-family: FZXBSJW--GB1-0;
        }
    }

}


.web {
    width: 1920px;
    //height: 5839px;
    margin: 0 auto;
    background-color: #f8f3f0;
    overflow: hidden;

    header {
        width: &w;

        img {
            width: 1920px;
            height: 683px;
        }
    }

    main {
        width: &w;


        // 流行趋势
        .trend {
            width: 967px;
            height: 1967px;
            margin: 88px auto 0;

            //优惠卷
            .trend_discount {

                width: 1016px;
                height: 196px;
                border: solid 4px #b78b55;
                display: flex;
                justify-content: center;
                align-items: center;

                li {
                    width: 166px;
                    height: 134px;

                    position: relative;
                    margin-left: 60px;

                    span {
                        font-family: Impact;
                        font-size: 72px;
                        color: #b78b55;

                        //￥符号
                        &::before {
                            @extend %pice_icon;
                            position: relative;
                            top: -42px;
                            left: -5px;
                        }

                    }

                    p {
                        font-size: 18px;
                        transform: translateY(-7px);

                    }

                    button {
                        border: transparent;
                        width: 85px;
                        height: 20px;
                        background-color: #f46a70;
                        color: white;
                        margin-left: 8px;
                        cursor: pointer;
                    }

                    &:first-child {

                        span:after {
                            content: '无门槛';
                            display: inline-block;
                            font-size: 16px;
                            color: #010101;
                            margin-left: 3px;
                        }

                    }

                    &::after {
                        content: '';
                        display: inline-block;
                        width: 2px;
                        height: 135px;
                        border-right: 1px solid #105335;
                        position: absolute;
                        top: 0;
                        right: 20px;
                        transform: rotate(15deg);
                    }

                    &:last-child::after {
                        border-right: none;
                    }
                }
            }

            .trend_content {
                margin: 0 auto;

                //标题
                .content_line {
                    // width: 690px;
                    @extend %trend_line;
                }

                .text_ul {
                    margin-top: 130px;

                    li {
                        margin-bottom: 63px;
                        display: flex;
                        justify-content: space-between;

                        //图片
                        .text_left {
                            width: 473px;
                            height: 341px;
                            overflow: hidden;
                        }

                        //文字
                        .text_right {

                            width: 330px;
                            height: 336px;
                            margin-left: 48px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            position: relative;

                            p:first-child {
                                font-size: 30px;

                            }

                            p:nth-child(2) {
                                font-size: 44px;
                                color: #bd9c6f;
                                font-family: SimSun;
                                position: relative;
                                top: -30px;

                                //伪元素做装饰横线
                                &::before {
                                    @extend %lineae;

                                }
                            }

                            //三个小圆
                            .circle {
                                display: flex;

                                div {
                                    width: 71px;
                                    height: 71px;
                                    border-radius: 50%;
                                    border: 1px solid #010101;
                                    font-size: 18px;

                                    letter-spacing: 1px;
                                    text-align: center;
                                    margin-left: 30px;

                                    span {
                                        position: relative;
                                        top: 12px;
                                    }
                                }
                            }

                            //安全放心的材质
                            p:nth-child(4) {
                                font-size: 18px;
                                margin-top: 20px;

                            }

                            .pice {
                                position: absolute;
                                //top: 300px;
                                bottom: 0;

                                //价格
                                span {
                                    @extend %pice_number;

                                }

                                button {
                                    @extend %pice_button;
                                }

                            }
                        }

                        &:nth-child(2) {
                            flex-flow: row-reverse;

                        }
                    }

                }

            }
        }

        //热销爆款
        .hotseller {

            //标题
            .hotseller_line {
                width: 590px;

                margin: 0 auto 30px;
                display: flex;
                justify-content: space-between;
                color: #b0822b;

                span {
                    font-size: 88px;
                    position: relative;

                    //伪元素做竖线
                    &::after {
                        content: '';
                        display: inline-block;
                        width: 52px;
                        height: 84px;
                        border-right: 3px solid #010101;
                        position: absolute;
                        top: 20px;

                    }

                    &:nth-child(2) {
                        &::after {
                            border-right: 3px solid #131212;
                        }
                    }

                    &:nth-child(3) {
                        &::after {
                            border-right: 3px solid #111010;
                        }
                    }

                    &:last-child {
                        &::after {
                            content: none;
                        }
                    }
                }
            }

            // 内容
            .hostsell_content {

                width: $w;
                height: 1144px;
                background-color: #ebe3d6;
                box-sizing: border-box;
                padding-top: 72px;

                ul {
                    margin: 0 auto;
                    width: 1040px;
                    height: 995px;

                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: space-between;

                    li {
                        width: 267px;
                        height: 482px;
                        margin-bottom: 0;
                        text-align: center;

                        .img_box {
                            width: 267px;
                            height: 282px;
                            background-color: #f8f3f0;
                            overflow: hidden;
                            margin-bottom: 20px;

                            img {
                                transform: translate(-30px, 70px);
                            }
                        }

                        span {
                            font-size: 24px;
                            letter-spacing: 2px;
                            margin-top: 20px;
                        }

                        p {
                            font-size: 33px;
                            width: 260px;
                            color: #bd9c6f;
                            position: relative;
                            top: -40px;

                            &::before {
                                @extend %lineae;
                                transform: translateY(12px);
                                width: 230px;

                            }
                        }

                        .pice {
                            margin-top: 18px;

                            span {
                                @extend %pice_number;

                            }

                            button {
                                @extend %pice_button;
                                transform: translateY(-5px);
                            }
                        }

                    }
                }
            }
        }


        // 流行趋势2
        .trendnext {

            //标题
            .trendnext_line {
                @extend %trend_line;
            }

            //内容
            .trendnext_content {

                ul {
                    width: 1162px;
                    margin: 190px auto 0;
                    

                    li {
                        width: 100%;
                        display: flex;
                        //justify-content: space-between;

                        ._left {

                            width: 580px;
                            height: 570px;
                        }

                        ._right {
                            margin-left: 25px;
                            width: 580px;
                            height: 570px;
                            position: relative;
                            .right_text {
                                display: inline-block;
                                //width: 380px;
                                height: 218px;
                                text-align: center;
                                h2{
                                    font-size: 38px;
                                    color: #ad7c31;
                                    
                                    
                                }
                                p{
                                    font-size: 15px;
                                    color: #c2b197;
                                    margin-top: 30px;
                                    span{
                                       margin-bottom: 5px;
                                    }
                                }
                                .pice{
                                    margin-top: 30px;
                                    span:first-child {
                                        font-size: 18px;
                                        color: #896b4c;
                                        text-decoration: line-through;
                                    }
            
                                    span:last-child {
                                        font-size: 23px;
                                        color: #d6353b;
                                    }
                                }
                            }

                            img:nth-child(2) {
                                width: 524px;
                                height: 494px;
                                position: absolute;
                                bottom: 0;
                                left: -15%;
                            }

                            img:nth-child(3) {
                                width: 239px;
                                height: 206px;
                                position: absolute;
                                right: -30px;
                                top: 96px;
                            }
                        }
                        &:last-child{
                            margin-top: 34px;
                            flex-flow: row-reverse;
                            ._right{
                                
                                margin-left: 0;
                                text-align: center;
                                img:nth-child(2) {
                                    width: 316px;
                                    height: 327px;
                                    position: absolute;
                                    left: 290px;
                                    top: 150px;
                                }
    
                                img:nth-child(3) {
                                    width: 239px;
                                    height: 206px;
                                    position: absolute;
                                    left: -40px;
                                    top: 66px;
                                    transform: translateX(-40px);
                                }
                            }
                        }
                    }
                }
            }
        }

        //现代小情调
        .fellingtone {
            width: 1327px;
            height: 349px;
            margin: 0 auto;

            ul {
                display: flex;
                justify-content: space-between;

                li {
                    width: 325px;
                    height: 326px;
                    background-color: #e4dace;
                    text-align: center;

                    img {
                        width: 265px;
                        height: 256px;
                    }

                    .fellingtone_text {
                        h2 {
                            font-size: 26px;
                            color: #ad7c31;
                        }

                        span:nth-child(2) {
                            font-size: 12px;
                            color: #896b4c;
                            text-decoration: line-through;
                        }

                        span:last-child {
                            font-size: 15px;
                            color: #d6353b;
                        }
                    }
                }
            }
        }
    }





    footer {
        width: &w;
        height: 76px;
        background-color: #bd9c6f;

    }
}